
<nz-layout class="inner-layout">
  <nz-sider
    nzTheme="light"
    nzCollapsible
    [(nzCollapsed)]="isCollapsed"
    [nzBreakpoint]="'lg'"
    [nzCollapsedWidth]="0"
    [nzZeroTrigger]="zeroTrigger"
    >
    <nz-tree [nzData]="_ngTree" [nzExpandAll]="true" nzShowLine (nzClick)="searchByDept($event)"> </nz-tree>
  </nz-sider>
  <nz-content >
    <div class="search-collapse">
      <form
        nz-form
        [nzLayout]="'inline'">
        <nz-form-item>
          <nz-form-label>登录账号</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="_cnd.loginName" name="loginName"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>用户昵称</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="_cnd.userName" name="userName"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>手机号码</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="_cnd.phonenumber" name="phonenumber"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>帐号状态</nz-form-label>
          <nz-form-control>

            <nz-select
              style="width: 200px;"
              [(ngModel)]="_cnd.status"
              name="status"
            >
              <nz-option nzLabel="全部" nzValue=""></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>创建时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker [(ngModel)]="createTimes" name="createTimes"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button class="btn-primary" (click)="search()"> <i nz-icon nzType="search"></i>搜索</button>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button class="btn-warning" (click)="search(true)"> <i nz-icon nzType="sync"></i>重置</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="search-table">
      <div class="operate">
        <button nz-button [nzType]="'primary'" (click)="addInfo()"><i nz-icon nzType="plus"></i>新增</button>
        <button  *ngIf="!isSm()" nz-button [nzType]="'edit'"  [disabled]="!isEditBtn" (click)="editInfoTop()"><i nz-icon nzType="form"></i>编辑</button>
        <button  *ngIf="!isSm()" nz-button [nzType]="'delete'" [disabled]="!isDeleteBtn"
                nz-popconfirm
                nzPopconfirmTitle="确定删除?"
                nzPopconfirmPlacement="top"
                (nzOnConfirm)="deleteSome()"

        ><i nz-icon nzType="close"></i>删除</button>
        <nz-radio-group>
          <button nz-button [nzType]="'refresh'" (click)="search()"><i nz-icon nzType="sync"></i>刷新</button>
        </nz-radio-group>
      </div>

      <nz-table
        *ngIf="!isSm()"
        #ajaxTable
        nzShowSizeChanger
        [nzFrontPagination]="false"
        [nzData]="_page.rows"
        [nzLoading]="loading"
        [nzTotal]="_page.total"
        [(nzPageIndex)]="_cnd.pageNum"
        [(nzPageSize)]="_cnd.pageSize"
        [nzSize]="'small'"
        [nzShowQuickJumper]="true"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="search()"
        (nzPageSizeChange)="search()"
      >
        <thead>
        <tr>
          <th
            nzShowCheckbox
            [(nzChecked)]="isAllChecked"
            (nzCheckedChange)="checkedAll($event)"
          ></th>
          <th>登录账号</th>
          <th>用户昵称</th>
          <th>部门</th>
        <!--  <th>用户邮箱</th>-->
          <th>手机号码</th>
          <th>用户性别</th>
          <th>帐号状态</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of ajaxTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]="checkedIdMap[data.userId]"
            (nzCheckedChange)="checkedChange()"
          ></td>
          <td>{{ data.loginName }}</td>
          <td>{{ data.userName }}</td>
          <td>{{ data.deptName }}</td>
          <!--<td>{{ data.email }}</td>-->
          <td>{{ data.phonenumber }}</td>
          <td>{{ data.sex }}</td>
          <td>{{ data.status }}</td>
          <td>{{ data.createTime }}</td>
          <td>
            <button nz-button [nzType]="'edit'" (click)="editInfo(data.userId)" ><i nz-icon nzType="form"></i>编辑</button>
            <button nz-popconfirm
                    nzPopconfirmTitle="确定删除?"
                    nzPopconfirmPlacement="top"
                    (nzOnConfirm)="deleteOne(data.userId)"
                    nz-button
                    [nzType]="'delete'" ><i nz-icon nzType="close"></i>删除</button>
          </td>
        </tr>
        </tbody>
        <ng-template #totalTemplate let-total>共{{ total }}条数据</ng-template>
      </nz-table>

      <nz-table
        *ngIf="isSm()"
        #ajaxTable
        [nzFrontPagination]="false"
        [nzData]="_page.rows"
        [nzLoading]="loading"
        [nzTotal]="_page.total"
        [(nzPageIndex)]="_cnd.pageNum"
        [(nzPageSize)]="_cnd.pageSize"
        [nzSize]="'small'"
        (nzPageIndexChange)="search()"
      >
        <tbody *ngFor="let data of ajaxTable.data">
        <tr>
          <td>
            <div class="card-views">
              <div class="card-view"><span class="title" >登录账号</span><span class="value">{{ data.loginName }}</span></div>
              <div class="card-view"><span class="title" >用户昵称</span><span class="value">{{ data.userName }}</span></div>
              <div class="card-view"><span class="title" >部门</span><span class="value">{{ data.deptName }}</span></div>
              <div class="card-view"><span class="title" >手机号码</span><span class="value">{{ data.phonenumber }}</span></div>
              <div class="card-view"><span class="title" >用户性别</span><span class="value">{{ data.sex }}</span></div>
              <div class="card-view"><span class="title" >帐号状态</span><span class="value">{{ data.status }}</span></div>
              <div class="card-view"><span class="title" >创建时间</span><span class="value">{{ data.createTime }}</span>
              </div>
              <div class="card-view">
                <span class="title" style="text-align: center; ">操作</span>
                <span class="value">
                <button nz-button [nzType]="'edit'" (click)="editInfo(data.userId)" ><i nz-icon nzType="form"></i>编辑</button>
                <button nz-popconfirm
                        nzPopconfirmTitle="确定删除?"
                        nzPopconfirmPlacement="top"
                        (nzOnConfirm)="deleteOne(data.userId)"
                        nz-button
                        [nzType]="'delete'" ><i nz-icon nzType="close"></i>删除</button>
              </span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>

    <!--crud-->
    <nz-modal class="formNzModal"
              [(nzVisible)]="isVisible"
              [nzTitle]="modalTitle"
              [nzWidth]="modalWidth"
              nzMaskClosable="false"
              (nzOnCancel)="openOrCloseModal(false)"
              (nzOnOk)="saveOrUpdate()"
              [nzOkLoading]="isOkLoading"
    >
      <div style="padding:0px;overflow: auto;" [ngStyle]="{ 'height': autoHeight+'px'}">
        <form nz-form [formGroup]="validateForm">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired  nzFor="deptId">归属部门</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24"  nzErrorTip="部门不能为空">
              <nz-tree-select
                formControlName="deptId"
                id="deptId"
                [(nzDisabled)]="ngTreeDisabled"
                [nzNodes]="_ngTree"
                [nzDefaultExpandAll]="true"
                nzShowSearch
                nzPlaceHolder=""
              >
              </nz-tree-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="loginName">登录账号</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="登录账号不能为空或已被注册">
              <input nz-input formControlName="loginName" id="loginName" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="userName">用户名称</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="用户名称不能为空">
              <input nz-input formControlName="userName" id="userName" />
            </nz-form-control>
          </nz-form-item>
          <!--<nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="userType">用户类型</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-select formControlName="userType" id="userType">
                <nz-option nzValue="" nzLabel=""></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>-->
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired  nzFor="email">用户邮箱</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="用户邮箱不能为空或已被注册">
              <input nz-input formControlName="email" id="email" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired  nzFor="phonenumber">手机号码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="手机号码不能为空或已被注册">
              <input nz-input formControlName="phonenumber" id="phonenumber" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="sex">用户性别</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-select formControlName="sex" id="sex">
                <nz-option nzValue="0" nzLabel="男"></nz-option>
                <nz-option nzValue="1" nzLabel="女"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <!--<nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="avatar">头像路径</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="avatar" id="avatar" />
            </nz-form-control>
          </nz-form-item>-->
          <!--<nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="password">密码</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input formControlName="password" id="password" />
            </nz-form-control>
          </nz-form-item>-->
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="status">帐号状态</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-select formControlName="status" id="status">
                <nz-option nzValue="0" nzLabel="正常"></nz-option>
                <nz-option nzValue="1" nzLabel="禁用"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="status">角色</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <nz-checkbox-wrapper (nzOnChange)="roleChange($event)">
               <label nz-checkbox [nzValue]="item.roleId" [(nzChecked)]="item.userChecked" *ngFor="let item of roles">{{item.roleName}}</label>
              </nz-checkbox-wrapper>
            </nz-form-control>
          </nz-form-item>


        </form>
      </div>
    </nz-modal>

  </nz-content>

  <ng-template #zeroTrigger>
    <i nz-icon nzType="menu-fold" nzTheme="outline"></i>
  </ng-template>
</nz-layout>




